<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>添加角色</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="角色名字">
                        <el-input style="width: 220px" v-model="form.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input style="width: 220px" v-model="form.roleDes"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单权限">
                        <el-tree
                            :data="data"
                            default-expand-all
                            ref="tree"
                            show-checkbox
                            node-key="menuId"
                            @check-change="checkedChange"
                            :props="defaultProps"
                        >
                        </el-tree>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="danger" style="width: 80px">取消</el-button>
                        <el-button type="primary" @click="onSubmit">添加角色</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    name: 'baseform',
    data() {
        return {
            form: {
                roleName: '',
                roleDes: [],
                menuChecked: []
            },
            data: [],
            defaultProps: {
                children: 'subs',
                label: 'title'
            }
        };
    },
    methods: {
        onSubmit() {
            //这里就执行添加角色
            //TODO 这里就是向服务器发送请求的地方....
            //这里还需要注意一个问题：就是我们图片和文件一起上传的时候 只能采用表单上传
            //第一步：就是将要传输的数据进行封装
            let form1 = new FormData();
            form1.append('roleName', this.form.roleName);
            form1.append('roleDes', this.form.roleDes);
            form1.append('menuChecked', this.form.menuChecked);

            //接下来就是发送请求到服务器实现用户的添加
            this.$axios({
                method: 'POST',
                url: '/api/roleservice/roles/addRole.action',
                data: form1,
                header: {
                    'Content-Type': 'multipart/form-data' //这个叫做以表单的形式上传数据
                }
            }).then(
                (resp) => {
                    if (!resp.data.code) {
                        bus.$emit('close_current_tags');
                        this.init();
                    } else {
                        //上传失败
                        this.$message.error('添加角色数据失败');
                    }
                },
                (error) => {
                    //上传的时候可能遇到网络阻塞
                    this.$message.error('添加角色数据失败');
                }
            );
        },
        //这个就是树形菜单选项发生改变之后要触发的事件
        //这一个参数就表示的是当前选中的选项是谁
        checkedChange() {
            //树形菜单选择框发生改变时触发的事件
            const allCheckNodes = this.$refs.tree.getCheckedNodes(false, true); //利用这个方式就可以获得选中的节点
            //先将存储选中数据的对象清空
            this.form.menuChecked = [];
            for (var i = 0; i < allCheckNodes.length; i++) {
                this.form.menuChecked[i] = allCheckNodes[i].menuId;
            }
            console.log('选中的节点：' + this.form.menuChecked);
        },
        init() {
            //发送请求初始化我们的菜单
            this.$axios.get('/api/permMenuService/permMenu/list.action').then(
                (resp) => {
                    if (!resp.data.code) {
                        this.data = resp.data.dataMap.menuList;
                    } else {
                        this.$message.error('初始化菜单信息失败');
                    }
                },
                (error) => {
                    this.$message.error('初始化菜单信息失败:' + error.message);
                }
            );
        }
    },
    created() {
        this.init();
    }
};
</script>